<template>
  <div class="loginFormBox">
    <div class="loginFormBox2">
      <h2>手机号登入</h2>
      <!-- El表单————开始 -->
      <el-form
        class="loginFrom"
        ref="ruleFormRef"
        :model="logindata"
        :rules="rules"
      >
        <el-form-item prop="username">
          <el-input
            @blur="verifyUsername"
            v-model="logindata.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input
            v-model="logindata.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phonenumber">
          <el-input
            v-model="logindata.phonenumber"
            placeholder="请输入电话号码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="logindata.password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            class="btnSubmit"
            @click="submitForm('ruleFormRef')"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
      <!-- El表单————结束 -->

      <!-- 找回密码 开始 -->

      <div class="tiparea">
        <p>
          <a class="btnforget btn" @click.prevent="">忘记密码？</a>
          <a class="btnregister btn" @click.prevent="toregister"
            >已有账号,去登入</a
          >
        </p>
      </div>

      <!-- 找回密码 介绍 -->
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { computed } from "vue";
import { useRouter } from "vue-router"; //____________________暂停 `
import { axios } from "axios";
export default {
  setup() {
    //路由地址的跳转
    var router = useRouter();
    // 取vuex里面的值
    const vuexdata = useStore();
    const trance = computed(() => {
      return vuexdata.state.trance;
    });

    //用户输入的数据
    const logindata = reactive({
      username: "",
      phonenumber: "",
      password: "",
      email: "",
    });

    const { proxy } = getCurrentInstance();
    let cancel = null;

    //校验用户名是否已存在 _开始
    const verifyUsername = (rule, value, callback) => {
      console.log("aaaa");
      if (cancel !== null) {
        cancel();
      }
      proxy.$axios({
          url: "/api/nameexist",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            username: logindata.username,
          },
          cancelToken: new proxy.$axios.CancelToken(function (c) {
            cancel = c;
          }),
        })
        .then((res) => {
          console.log(res.data.flag);
          cancel = null;
          if (res.data.flag == "false") {
            //如果后端返回true 则提示用户名可以注册
            callback(new Error("用户名已存在"));
          } else {
            callback();
          }
        });

      // 备用
      // proxy.$axios({
      //     url: "/api/nameexist",
      //     method: "post",
      //     headers: {
      //       "Content-Type": "application/json",
      //     },
      //     data: {
      //       username: logindata.username,
      //     },
      //     cancelToken:new axios.cancelToken(function(c){cancle=c})
      //   })
      //   .then((res) => {
      //     console.log(res.data.flag);
      //     cancel=null
      //     if (res.data.flag == "false") {
      //       //如果后端返回true 则提示用户名可以注册
      //       callback(new Error("用户名已存在"));
      //     } else {
      //       callback();
      //     }
      //   })
      // if (value === "113355") {
      //   callback(new Error("Please input the password again"));
      // } else {
      //   callback();
      // }
    };

    //校验用户名是否已存在 _结束

    //数据的校验
    const rules = reactive({
      username: [
        {
          message: "请输入用户名",
          required: "true",
          trigger: "blur",
        },
        {
          max: 6,
          min: 2,
          message: "用户名需要2-6位",
        },
        {
          validator: verifyUsername,
        },
      ],
      email: [
        {
          required: "true",
          message: "请输入您的邮箱",
          trigger: "blur",
        },
        {
          type: "email",
          message: "请输入正确格式的邮箱",
          trigger: ["blur", "change"],
        },
      ],
      phonenumber: [
        {
          message: "手机号不能为空",
          required: "true",
          trigger: "blur",
        },
        {
          min: 11,
          max: 11,
          message: "请输入11位手机号",
        },
      ],
      password: [
        {
          message: "密码不能为空",
          required: "true",
          trigger: "blur",
        },
        {
          min: 6,
          message: "密码需要六位数以上",
        },
      ],
    });
    //点击提交以后 再校验一次
    const submitForm = (formEl) => {
      if (!proxy.$refs[formEl]) return;
      proxy.$refs[formEl].validate((valid) => {
        if (valid) {
          //通过校验
          // proxy
          //   .$axios({
          //     url: "http://101.43.199.203:8080/nameexist",
          //     method: "post",
          //     data: JSON.stringify(logindata.username) , //这里json对象会转换成json格式字符串发送
          //     header: {
          //       "Content-Type": "application/json", //如果写成contentType会报错,如果不写这条也报错
          //       //Content type 'application/x-www-form-urlencoded;charset=UTF-8'...
          //     },
          //   })
          proxy
            .$axios({
              url: "/api/nameexist",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                username: logindata.username,
              },
            }) //——————————————————————2022/2/15停止

            .then((res) => {
              //登入成功后跳转到 ‘注册成功页面’
              console.log(res);
              // router.push("/");
            });
          console.log("submit!");
        } else {
          console.log("error submit!");
          return false;
        }
      });
    };
    //点击去注册
    const toregister = () => {
      vuexdata.commit("tranceMethod", false);
    };
    return { logindata, rules, submitForm, toregister };
  },
  // mounted:{
  //   verifyUsername(){
  //     var get = axios.create()
  //     console.log('get')
  //   }
  // }
};
</script>

<style>
.loginFormBox {
  /* background-image: url("../assets/Wecome.png"); */
  display: flex;
  justify-items: center;
  align-content: center;
  width: 500px;
  height: 500px;
  margin: 0 auto;

  /* 阴影 */
  /* -webkit-box-shadow: 1px 1px 3.5px 5px #ddd;
  -moz-box-shadow: 1px 1px 3.5px 5px #ddd;
  box-shadow: 1px 1px 3.5px 5px #ddd; */
}

h2 {
  font-size: 30px;
  margin-top: 30px;
}
/* 输入框边距 */
.loginFrom {
  padding: 60px 60px 30px 60px;
}
.btnSubmit {
  width: 100%;
}
/* 注册按钮 */
.btnregister {
  float: right;
  margin-right: 60px;
}
.btn {
  cursor: pointer;
}
.btn:hover {
  color: #028f88;
}
/* 忘记密码按钮 */
.btnforget {
  float: left;
  margin-left: 60px;
}
</style>